import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

import { Provider } from 'react-redux';
import { ConfigureStore } from "./redux/ConfigureStore";
import { PersistGate } from "redux-persist/es/integration/react";
import { Loading } from "./components/LoadingComponent";

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();
  const { persistor, store } = ConfigureStore();

  if (!isLoadingComplete) {
      return null;
  } else {
      return (
          <Provider store={store}>
              <PersistGate loading={<Loading />} persistor={persistor}>
                  <SafeAreaProvider>
                      <Navigation colorScheme={colorScheme} />
                      <StatusBar />
                  </SafeAreaProvider>
              </PersistGate>
          </Provider>
      );
  }
}
